<template>
  <div class="hot-song-list" v-if="showSong">
    <!-- 热歌榜 -->
    <div class="hotop">
      <div class="hotopct">
        <div class="hoticon"></div>
        <div v-if="hotInfo" class="hottime">更新日期:&nbsp;{{hotInfo.updateTime|formatDate("m月d日")}}</div>
      </div>
    </div>
    
    <!-- 热歌榜所有歌曲 -->
    <song-item v-if="showSong.length>0" :item="showSong" :shownumber="true" @play="$emit('play',$event)"></song-item>
    <music-loading v-else></music-loading>
    
    <!-- 底部点击加载 -->
    <div class="more" @click="more" ref="more">{{page>=10?'我是有底线的':'点击加载更多歌曲'}}</div>
  </div>

  
</template>

<script>
import SongItem from "@/components/SongItem.vue";
import MusicLoading from "@/components/MusicLoading.vue"
export default {
  data() {
    return {
      hotInfo:null,
      hotSong:[],
      page:1,
    };
  },
  created() {
    this.getHotInfo();
  },
  beforeRouteEnter(to, from, next) {
			//进入路由的时候，绑定滚动事件.
			next(vm => {
				window.addEventListener("scroll", vm.scrollbar);
			});
	},
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.scrollbar); //离开当前路由移除scroll事件
    next();
  },
  methods:{
    async getHotInfo(){
        let res=await this.axios.get("/playlist/detail?id=3778678")
        this.hotInfo=res.playlist
        let hotSong=res.playlist.tracks
        console.log(hotSong)
        this.hotSong=hotSong.map((song,index)=>{
            song.song={
                album:song.al, 
                privilege:res.privileges[index],
                artists:song.ar,
                alias:song.alia, 
            }
            // console.log(song)
            return song  
        })
        console.log(hotSong)

      },
      more(){
        if(this.page>=10){
          alert("没有更多数据了")
          return
        }
        this.page++
      },
      scrollbar() {
				let el = document.documentElement || document.body; //获取滚动条滚动距离兼容写法
				let top = el.scrollTop + el.clientHeight; //底部距离顶部的距离
				let moretop = this.$refs.more.offsetTop; //more加载条的距离顶部的距离 offsetTop
				// console.log("moretop===>",moretop);
				if (top >= moretop + 40) {
					this.more();
				}
			}
  },
  computed:{
    showSong(){
      return this.hotSong.slice(0,20*this.page)
    }
  },
  components: {
    SongItem,
    MusicLoading,
  },
};
</script>

<style lang="less" scoped>
.hot-song-list{
  margin-bottom: 60px;
}
.hotop {
  position: relative;
  padding-top: 38.9%;
  overflow: hidden;
  background: url("../assets/hot_music_bg_2x.jpg") no-repeat;
  background-size: contain;
  position: relative;
  &::after {
    content: "";
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .hotopct{
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding-left: 20px;
    box-sizing: border-box;
    
    .hoticon{
        background: url("../assets/index_icon_2x.png") no-repeat;
        width: 142px;
        height: 67px;
        background-position: -24px -30px;
        background-size: 166px 97px;
        width: 142px;
        height: 67px;
    }
  }
  .hottime{
    margin-top: 10px;
    color: hsla(0,0%,100%,.8);
    font-size: 12px;
    transform: scale(.91);
    transform-origin: left top;
  }
  
}
.more{
  height: 55px;
  line-height: 55px;
  text-align: center;
}
</style>